<template>
	<view>
		<!-- 音乐页面top区域 -->
		<view class="music_top">
			<text>音乐</text>
			<view @click="toMusicSearch"></view>
		</view>
		<!-- 音乐分类区域 -->
		<view class="music_cates">
			<view>
				<image src="../../static/shouc.png" mode=""></image>
				<text>收藏</text>
			</view>
			<view>
				<image src="../../static/zuij.png" mode=""></image>
				<text>最近</text>
			</view>
			<view @click="toGeDan">
				<image src="../../static/gedan.png" mode=""></image>
				<text>歌单</text>
			</view>
		</view>
		<!-- 舞种分类区域 -->
		<view class="dance">
			<view class="dance_title">舞种分类</view>
			<view class="dance_cates">
				<view @click="qiaHandle">
					<image src="../../static/qia.png"></image>
				</view>
				<view>
					<image src="../../static/qia.png"></image>
				</view>
				<view>
					<image src="../../static/qia.png"></image>
				</view>
				<view>
					<image src="../../static/qia.png"></image>
				</view>
				<view>
					<image src="../../static/qia.png"></image>
				</view>
				<view>
					<image src="../../static/qita.png"></image>
				</view>
			</view>
		</view>
		<!-- 歌单区域 -->
		<view class="playList">
			<view class="playList_title">
				<view class="gedan">歌单广场</view>
				<uni-tag text="更多" size="small" circle type="primary" inverted @click="bindClick"></uni-tag>
			</view>
			<view class="playList_cates">
				<view>
					<image src="../../static/logo.png"></image>
					<text>恰恰歌曲大合集</text>
				</view>
				<view>
					<image src="../../static/logo.png"></image>
					<text>恰恰歌曲大合集</text>
				</view>
				<view>
					<image src="../../static/logo.png"></image>
					<text>恰恰歌曲大合集</text>
				</view>
				<view>
					<image src="../../static/logo.png"></image>
					<text>恰恰歌曲大合集</text>
				</view>
				<view>
					<image src="../../static/logo.png"></image>
					<text>恰恰歌曲大合集</text>
				</view>
				<view>
					<image src="../../static/logo.png"></image>
					<text>恰恰歌曲大合集</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	export default {
		components: {uniTag},
		data () {
			return {}
		},
		methods: {
			toMusicSearch () {
				uni.navigateTo({
					url: "../musicSearch/music_search"
				})
			},
			bindClick () {
				uni.navigateTo({
					url: "../music_all_cates/music_all_cates"
				})
			},
			toGeDan () {
				uni.navigateTo({
					url: "../music_gedan/music_gedan"
				})
			}
		}
	}
</script>

<style lang="scss">
	.music_top {
		position: relative;
		height: 50rpx;
		margin: 10rpx 10rpx 76rpx 10rpx;
		text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width:72rpx;
			height:50rpx;
			font-size:36rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:50rpx;
		}
		view {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			width: 44rpx;
			height: 44rpx;
			background: url(../../static/sousu.png);
			margin-right: 58rpx;
		}
	}
	.music_cates {
		display: flex;
		justify-content: space-around;
		view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				width: 92rpx;
				height: 92rpx;
				margin-bottom: 16rpx;
			}
			text {
				width:52rpx;
				height:36rpx;
				font-size:26rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height:36rpx;
			}
		}
	}
	.dance {
		margin-top: 56rpx;
		padding: 0 32rpx;
		margin-bottom: 50rpx;
		.dance_title {
			width:144rpx;
			height:50rpx;
			font-size:36rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:600;
			color:rgba(51,51,51,1);
			line-height:50rpx;
			margin-bottom: 28rpx;
		}
		.dance_cates {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-content: stretch;
			view {
				width: 216rpx;
				height: 216rpx;
				margin-bottom: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.playList {
		padding: 0 32rpx;
		.playList_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 28rpx;
			.gedan {
				width:144rpx;
				height:50rpx;
				font-size:36rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:600;
				color:rgba(51,51,51,1);
				line-height:50rpx;
			}
		}
		.playList_cates {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			view {
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width:216rpx;
					height:216rpx;
				}
				text {
					width:196rpx;
					height:40rpx;
					font-size:28rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:40rpx;
					margin: 12rpx 0 30rpx 0;
				}
			}
		}
	}
</style>
